<template>
  <el-dialog
    v-model="dialogVisible"
    title="剖面坐标录入"
    width="650"
    @close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      status-icon
      label-position="top"
    >
      <!-- <el-form-item label="Activity name" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item> -->

      <el-form-item label="参考系" prop="reference">
        <el-radio-group v-model="ruleForm.reference" @change="onRadioChange">
          <el-radio value="1">大地2000</el-radio>
          <el-radio value="2">经纬度</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="剖切点位">
        <el-table :data="positions" style="width: 100%">
          <el-table-column prop="name" label="点位名称" width="100" />
          <el-table-column
            prop="x"
            :label="ruleForm.reference == 1 ? '横坐标' : '经度'"
          >
            <template #default="scope">
              <el-input
                style="width: 100%"
                v-model="scope.row.x"
                :placeholder="`请输入${
                  ruleForm.reference == 1 ? '横坐标' : '经度'
                }`"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="y"
            :label="ruleForm.reference == 1 ? '纵坐标' : '纬度'"
          >
            <template #default="scope">
              <el-input
                style="width: 100%"
                v-model="scope.row.y"
                :placeholder="`请输入${
                  ruleForm.reference == 1 ? '纵坐标' : '纬度'
                }`"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onOk"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as turf from "@turf/turf";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import { cloneDeep } from "lodash";

const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);

const ruleForm = ref({
  reference: "1",
});
const rules = {
  reference: [{ required: true, trigger: "blur" }],
};

const positions = ref([
  { name: "点位1", x: "", y: "" },
  { name: "点位2", x: "", y: "" },
  //   { name: "点位2", x: "39529672.94589045", y: "3346646.817576911" },
]);
// 117.318942,30.250559
// 117.320059,30.241384

const show = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  positions.value = [
    { name: "点位1", x: "", y: "" },
    { name: "点位2", x: "", y: "" },
  ];
};

const onRadioChange = () => {
  positions.value = [
    { name: "点位1", x: "", y: "" },
    { name: "点位2", x: "", y: "" },
  ];
};
const emits = defineEmits(["ok"]);

// 矿区开采境界
const range = [
  [
    [117.307440022225805, 30.238486714868323],
    [117.312267406382077, 30.247234320593275],
    [117.317249279289456, 30.248819004867496],
    [117.325436, 30.246754],
    [117.323978, 30.244839],
    [117.322558746355313, 30.245675885596082],
    [117.317178863931261, 30.23983464318335],
    [117.307440022225805, 30.238486714868323],
  ],
];
const onOk = () => {
  const reg = /^(?:[1-9]\d*)(?:\.\d+)?$/;
  if (positions.value.some((item) => !reg.test(item.x) || !reg.test(item.y))) {
    proxy.$modal.msgWarning("坐标格式不合法，请仔细检查！");
    return;
  }

  let xys = cloneDeep(positions.value);
  if (ruleForm.value.reference === "1") {
    xys.forEach((item) => {
      const xy = mars3d.PointTrans.proj4Trans(
        [Number(item.x), Number(item.y)],
        mars3d.CRS.CGCS2000_GK_Zone_3,
        mars3d.CRS.EPSG4326
      );
      item.x = xy[0];
      item.y = xy[1];
      //   const pt = turf.point([item.x, item.y]);
      //   console.log("是否在开采境界内",turf.booleanPointInPolygon(pt, poly))
    });
    console.log("坐标集合", xys);
  } else {
    xys = xys.map((item) => ({ x: Number(item.x), y: Number(item.y) }));
  }
  const poly = turf.polygon(range);
  const line = turf.lineString([
    [xys[0].x, xys[0].y],
    [xys[1].x, xys[1].y],
  ]);

  const cross = turf.booleanCrosses(line, poly);
  if (cross) {
    emits("ok", xys);
    handleClose();
  } else {
    proxy.$modal.msgWarning(`两点连线与地质模型不相交，无法进行剖面！`);
  }
};

defineExpose({ show });
</script>

<style lang="scss" scoped></style>
